<template>
  <div class="p-4">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="mb-3">话题列表</div>
        <div class="flex items-center mb-2">
          <el-button
            type="success"
            style="float: right"
            @click="deBounceWrap(handleAdd)"
            icon="el-icon-plus"
            >新增</el-button
          >
        </div>
      </div>
      <el-table :data="themeData" border>
        <el-table-column label="ID" prop="id" width="70px"></el-table-column>
        <el-table-column label="话题名称" prop="name"> </el-table-column>
        <el-table-column label="开始时间" prop="start_time"></el-table-column>
        <el-table-column label="结束时间" prop="end_time"></el-table-column>
        <el-table-column label="创建时间" prop="create_time"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="deBounceWrap(handelEdit, scope.row)"
              plain
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deBounceWrap(handleDelete, scope.row)"
              plain
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <cus-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.per_page"
        @pagination="getThemeList"
      />
    </el-card>

    <el-dialog
      :title="titleOptions[title] + '话题'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%"
      @close="handleClear"
      :before-close="handleClose"
    >
      <el-form :model="form" ref="form" inline :rules="rules">
        <el-form-item label="话题名称" prop="theme_name" label-width="180px">
          <el-input v-model="form.theme_name" clearable></el-input>
        </el-form-item>
        <el-form-item label="开启时间" prop="start_time" label-width="180px">
          <el-date-picker
            v-model="form.start_time"
            clearable
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="请选择开始时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="end_time" label-width="180px">
          <el-date-picker
            v-model="form.end_time"
            clearable
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="请选择结束时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" plain @click="handleClose">返回</el-button>
        <el-button type="primary" @click="deBounceWrap(handleSumbit, 'form')"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  themeList,
  themeAdd,
  themeEdit,
  themeDel
} from "@/api/topicSquare/topicSquare.js";
export default {
  name: "topicSquare",
  data() {
    return {
      listQuery: {
        page: 1,
        per_page: 10
      },
      themeData: [],
      total: 0,
      titleOptions: {
        add: "添加",
        edit: "编辑"
      },
      title: "add",

      dialogVisible: false,
      rules: {
        theme_name: [
          { required: true, message: "请输入话题名称", trigger: "blur" }
        ],
        start_time: [
          { required: true, message: "请选择开启时间", trigger: "change" }
        ],
        end_time: [
          { required: true, message: "请选择结束时间", trigger: "change" }
        ]
      },
      rowData: {},
      form: {
        theme_name: undefined,
        end_time: undefined,
        start_time: undefined
      }
    };
  },
  created() {
    this.getThemeList();
  },
  methods: {
    getThemeList() {
      let data = {};
      for (let key in this.listQuery) {
        if (this.listQuery[key]) {
          data[key] = this.listQuery[key];
        }
      }
      themeList(data).then(res => {
        this.themeData = res.data.data;
        this.total = res.data.total;
      });
    },

    handleAdd() {
      this.title = "add";
      this.dialogVisible = true;
    },
    handelEdit(row) {
      this.title = "edit";
      this.rowData = row;
      this.form.theme_name = row.name;
      this.form.start_time = row.start_time;
      this.form.end_time = row.end_time;
      this.dialogVisible = true;
    },
    //提交
    handleSumbit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.title === "add") {
            themeAdd(this.form).then(res => {
              if (res.code === 200) {
                this.$message.success("添加成功");
                this.getThemeList();
                this.dialogVisible = false;
              }
            });
          }
          if (this.title === "edit") {
            let data = {
              id: this.rowData.id,
              theme_name: this.form.theme_name,
              start_time: this.form.start_time,
              end_time: this.form.end_time
            };
            themeEdit(data).then(res => {
              if (res.code === 200) {
                this.$message.success("编辑成功");
                this.getThemeList();
                this.dialogVisible = false;
              }
            });
          }
        } else {
          return false;
        }
      });
    },

    handleClear() {
      this.$refs["form"].resetFields();
      this.form = {
        theme_name: undefined,
        start_time: undefined
      };
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleDelete(row) {
      this.$confirm("确认删除？此步骤无法恢复。", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: row.id
          };
          themeDel(data).then(res => {
            if (res.code === 200) {
              this.getThemeList();
              this.$message({
                type: "success",
                message: "删除成功"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            tyoe: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped></style>
